body { 
	background-color: #ECECEC; color: #4C4C4C;
	margin: 0px;
	padding: 0px;
	font-family: verdana, georgia, times, tahoma, arial, helvetica, sans-serif;
    font-size:   10px;
    line-height: 18px;
}
div, p , h1 , ul ,form {
   padding: 0px;
   margin: 0px;
}
input, textarea {
   font-family: verdana, georgia, sans-serif;
   font-size: 9px;
}
pre {
  background-color: #eee;
  color: inherit;
  padding: 10px;
  font-size: 10px;
}
a { color: #868068;background-color:inherit; }
a:visited { color: #868068;background-color:inherit; }
a:hover { color: #fff; background-color:#868068;text-decoration:none  }
a.red {
  text-decoration: underline;
  color: #fe0000;
  background-color: inherit;
}
a.red:hover {
  color: #ffffff;
  background-color: #fe0000;
}
div.clear_float_left {
	clear: left;
}
div.clear_float_right {
	clear: right;
}
p.flash_info_notice {
  font-size: 12px;
  font-weight: bold;
  color: green;
   background-color: inherit; 
}
p.flash_info_error {
  font-size: 12px;
  font-weight: bold;
  color: red;
  background-color: inherit;
}
span.spinning_icon {
  color: green;
  background-color: inherit;
  font-family: verdana ,sans-serif;
  font-size: 10px;
}
#main {
	width: 860px;
	margin: auto;
	background-image: url(/images/bg.jpg);
	background-repeat:repeat-y;
}
div.header div.login_top {
	background-color: #FFF;
	color: inherit;
	width: 826px;
	height: 40px;
	margin: 0px 16px 0px 18px;
	padding-top: 6px;
}
div.header div.top_menu {
	background-color: #e4e2d4;
	color: inherit;
	width: 826px;
	height: 84px;
	margin: 0px 16px 0px 18px;
	padding-top: 6px;
}
div.header div.top_menu div.fieldtrip_logo {
	float: left;
}
div.menu_elements {
	margin: 0px 38px ;
}
div.header div.top_menu div.fieldtrip_logo a {
	background-color: transparent;
}
div.header div.top_menu div.fieldtrip_logo img{
	margin: 0px;
	padding: 0px;
	border: 0px none;
}
div.header div.top_menu div.menu {
	font-weight: bold;
	float: right;
	width: 580px;
	color: #868068;
	background-color: inherit;
}
div.header div.top_menu div.menu {
	font-weight: bold;
	float: right;
	width: 580px;
	color: #868068;
	background-color: inherit;
}
div.header div.top_menu  div.menu ul {
    text-align: right;
}
div.header div.top_menu div.menu ul li {
    display: inline;
    padding: 0px 2px;
}
div.header div.top_menu div.menu ul li a {
	text-decoration: none;
}
div.header div.top_menu div.logged_user_menu {
	font-weight: bold;
	text-align: right;
	height: 64px;
}
div.header div.main_menu {
	width: 826px;
	height: 24px;
	margin: 0px 16px 0px 18px;
	background-image: url(/images/main_menu_bg.jpg);
	background-repeat:repeat-x;
    border-top: 1px solid #AFB962;
}
div.header div.main_menu div.menu {
	padding-top: 6px;
}
div.header div.main_menu  div.search_ecase {
	padding-top: 3px;
	font-weight: bold;
	float: right;
	color: #868068;
	background-color: inherit;
}
div.header div.main_menu  div.search_ecase a {
	text-decoration: none;
}
div.header div.main_menu div.menu ul li.selected {
  display: inline;
  background-color: #fff;
  color:inherit;
}
div.header div.main_menu div.menu ul li {
  display: inline;
  background-color: #AFB962;
  color:inherit;
  padding: 3px 14px;
  margin: 0px 2px;
  border-top: 1px solid #AFB960;
  border-left: 1px solid #AFB960;
  border-right: 1px solid #AFB960;
}
div.header div.main_menu div.menu ul li a {
	text-decoration: none;
	background-color: inherit;
    color: #fff;
    font-weight:bold;
}
div.header div.main_menu div.menu ul li a:hover {
	text-decoration: underline;
	background-color: transparent;
}
div.header div.main_menu div.menu ul li.selected span {
	color: #837D65;
	font-weight:bold;
    background-color: inherit;
	text-decoration: none;
}
.footer {
  	width: 860px;
  	height: 50px;
	margin: auto;
	background-image: url(/images/footer.jpg);
	background-repeat: no-repeat;
}
.cinfo_fieldtrip_logo {
	width: 415px;
	text-align: right;
}
.cinfo_fieldtrip_logo a {
	background-color: transparent;
}
.cinfo_fieldtrip_logo img {
	display: inline;
	border: 0px none;
}
.cinfo table tr td.info_image{
	width: 412px;
	height: 218px;
	/*border-right: 1px solid #868068;*/
}
.cinfo table tr td.info_data{
	width: 320px;
	vertical-align: middle;
}
.cinfo table tr td.info_data .title_type {
	font-family: georgia, verdana, sans-serif;
	color: #868068;
	background-color: inherit;
	font-size: 12px;
	margin: 12px 0px 4px 0px;
}
.cinfo table tr td.info_data div {
	margin-bottom: 20px;
}
.cinfo .login {
	border: 0px none;
	padding: 0px;
	margin: 0px;
}
.cinfo {
	background-color: #E4E2D5;
	color: inherit;
	background-image: url(/images/info_leftmap.jpg);
	background-repeat: no-repeat;
}
.login {
	background-color: #E4E2D5;
	color: inherit;
	background-image: url(/images/login_leftmap.jpg);
	background-repeat: no-repeat;
}
.login table tr td.login_image{
	width: 412px;
	height: 218px;
	/*border-right: 1px solid #868068;*/
}
.login table tr td.login_data{
	width: 320px;
	vertical-align: middle;
}
td.login_data #errorExplanation {
  	width: 304px;
  	margin: 2px 5px 0px 5px;
}
.login table tr td.login_data p{
	text-align: center;
}
.login table tr td.login_data table {
	width: 100%;
	margin: 0px 10px;
}
.login table tr td.login_data table tr td.login_first {
	text-align:right;
	width:40%;
}
.login table tr td.login_data table tr td.login_second {
	width:60%;
}
.login form {
	display: inline;
}
.login_unu_copyright {
	text-align: center;
	margin-top: 50px;
}
table.admin {
   border: 1px solid #ddd;
   font-size: 13px;
}
table.admin th{
   background-color: #ddd;
   color: inherit;
   padding: 6px 8px;
}
table.admin td {
    padding: 0px 8px;
    text-align: center;
}
.fieldWithErrors {
  padding: 2px;
  background-color: red;
  color: inherit;
  display: table;
}
div.content_normal{
  margin: 0px 52px;
  padding-bottom: 32px;
}
div.content_for_edit {
  margin: 0px 28px;
  padding-bottom: 32px;
}
div.content_for_edit .content_left_nedited{
  margin-left: 25px;
}
div.content_for_edit .content_right_nedited{
  margin-right: 25px;
}
div.content_for_edit .content_both_nedited{
  margin-left: 25px;
  margin-right: 25px;
}
div.content_normal div#content_left{
  width: 356px;
}
div.content_for_edit div#content_left {
	width: 382px;
}
div.content_normal div#content_case_left{
  width: 390px;
}
div.content_for_edit div#content_case_left {
	width: 418px;
}
div.content_normal div#content_case_right{
   width: 342px;
}
div.content_for_edit div#content_case_right {
	width: 370px;
}
div#content_case_right , div#content_right{
 float: right;
}
div#content_right{
 width: 376px;
}
div#content_discard_float {
  clear: right;
}
div#gmap{
    border: 1px solid black;
}
.country_map {
    width: 376px;
    height: 830px;
    margin-top: 10px;
}
.content_map {
    width: 342px;
    height: 390px;
	margin-bottom: 10px;
}
div#content_left div.country_light {
	border: 1px solid #d7d5c2;
	background-color:#f1f0e9;
	color:inherit;
	margin: 6px 0px;
  padding: 6px;
}
div#content_left div.country_dark {
	border: 1px solid #d7d5c2;
	background-color:#e4e2d4;
	color:inherit;
	margin: 6px 0px;
  padding: 6px;
}
div#content_left div.country_image {
	float: left;
}
div#content_left div.country_image img {
	border: 3px solid #d7d5c2;
}
div#content_left div.country_ecases {
  font-family: georgia , verdana , sans-serif;
  font-size: 11px;
  margin-left: 130px;
}
div#content_left div.country_ecases p{
  padding-top: 2px;
  color: #000;
  background-color: inherit;
  font-weight: bold;
}
div#content_left .country_ecases ul{
   list-style: square; 
}
p.add_link {
    text-align: right;
}
a.add_link , a.print_btn {
   font-weight: bold;
   font-size: 10px;
   font-family: verdana, georgia, sans-serif;
}
a.add_link {
   color: #ff0000;
   background-color:inherit;
}
a.add_link:visited { color: #ff0000;background-color:inherit; }
a.add_link:hover { color: #fff; background-color:#ff0000;  }
h1 {
   font-family: times, verdana, sans-serif;
   line-height: 28px;
   font-size: 28px;
   font-weight: normal;
}
h1.library_title {
   color: #9bb800;
   background-color:inherit;
   margin: 4px 0px 8px 0px;
}
h1.profile_title {
   color: #9bb800;
   background-color:inherit;
   margin: 4px 0px;
   clear: right;
}
h1.title {
   color: #8ea604;
   background-color:inherit;
}
.horizontal_line{
    line-height:1px;
    width: 100%;
    border-bottom: 1px dotted #9AB800;
}
.horizontal_line_solid {
    line-height:1px;
    width: 100%;
    border-bottom: 1px solid #9AB800;
}
.horizontal_line_grey{
    line-height:1px;
    width: 100%;
    border-bottom: 1px dotted #4C4C4C;
}
.form_element{
   margin: 10px 0px;
   background-color:#e4e2d5;
   color: inherit;
   padding: 2px 20px;
}
.form_element p {
    margin: 20px 0px;
}
.form_element p label{
  font-weight: bold;
 }
.submit_btn {
	margin: 10px 20px;
}
a.tag_link {
	text-decoration: none;
	font-weight: bold;
}
div#tag_results {
	color: inherit;
	background-color: #F1F0E9;
	padding: 8px;
}
div#tag_results p {
	color: #868068;
	background-color: inherit;
	font-weight:bold;
}
div#tag_results ul {
	list-style: none;
	font-family: verdana ,sans-serif;
}
div#tag_results li {
	margin: 16px 0px 16px 68px;
}
div#tag_results li a{
	text-decoration: none;
}
div#tag_results li span.green{
	color: #9BB800;
	background-color: inherit;
}
div#tag_results li span{
	text-decoration: underline;
}
div#tag_results li a:hover span{
	color: #fff;
	background-color: #868068;
	text-decoration: underline;
}
div#about_authors{
   color: #8A7F69;
   background-color: inherit; 
   margin-bottom: 6px;
   font-family: georgia, verdana, sans-serif;
}
.events ul {
   list-style: none;
}
.events_category_item, .event_item, p#overview_link {
  	font-weight: bold;
  	font-size: 14px;
	font-family: georgia, verdana, sans-serif;
	padding: 2px;
}
.events_category_item, .event_item {
	background-color: #f3f3e9;
	color: inherit;
}
.events_category_item img, p#overview_link img {
	padding-right: 2px;
	vertical-align: middle;
}
p#overview_link {
	background: none;
}
.events_category_item a, .event_item a, p#overview_link a {
	text-decoration: none;
	color: #8AA307;
	background-color: inherit;
}
.events_category_item a:hover, .event_item a:hover, p#overview_link a:hover {
	color: #fff; 
	background-color:#868068;
	text-decoration:none;
}
.event_item {
	padding: 0px;
}
.event_item a {
	color: #484845;
	background-color: inherit;
	font-weight: normal;
  	font-size: 12px;
}
.event_item img {
	padding-left: 14px;
	padding-right: 2px;
	vertical-align: middle;
}
.edit_map {
    width: 754px;
    height: 800px;
}
.event_date_wnd {
	width: 390px;
	background-color: #e4e2d4;
	color: inherit;
	position: absolute;
	top: 260px;
	left: 362px; 
	border-style: solid;
	border-width: thin;
	border-color: #888888;
	line-height: 20px;
}
.event_date_wnd .event_date_wnd_content div.part {
	margin-bottom: 10px;
}
.event_date_wnd .event_date_wnd_content div.part p {
	color: #3f3a27;
	background-color: inherit;
}
.event_date_wnd a:hover {
	background-color: transparent;
}
.event_date_wnd a img {
	border: 0px none;
}
.event_date_wnd .event_date_wnd_header {
	height: 15px;
	background-color: #cfcdc0;
	color: inherit;
	text-align: right;
	padding: 4px;
}
.event_date_wnd .event_date_wnd_content {
	padding: 6px 14px;
	color: #868068;
	background-color: inherit;
	font-weight: bold;
}
.event_date_wnd .event_date_wnd_content table.data_chooser {
	border-collapse: collapse;
  	border-spacing: 0px;
}
.event_date_wnd .event_date_wnd_content table.data_chooser tr td{
	width: 24px;
}
#map_area_selection {
   position: absolute;
}
#map_area_selection p {
	border:  1px black solid;
	background-color:  #fff;
	color: inherit;
	display:  inline; 
	padding: 2px;
}
#map_area_selection p a {
	color:  red;
	background-color: inherit;
	font-weight:  bold;
	text-decoration:  none;
}
#map_area_selection table {
  border-collapse: collapse;
  border-spacing: 0px;
  border: 1px dashed #fff;
  cursor: move;
}
#map_area_selection table tr td{
  font-size:1px;
  line-height:1px;
}
#map_area_selection table tr.top_bottom_map_selection {
    height: 10px;
}
#map_area_selection table tr#middle_map_selection_tr {
	height: 100%;
}
#map_area_selection table tr.top_bottom_map_selection td {
    height: 10px;
}
#map_area_selection table tr.top_bottom_map_selection td.map_area_selection_square {
  background-color: #fff;
  color: inherit;
  border: 1px solid black;
  border-collapse: collapse;
  border-spacing: 0px;
  width: 10px;
}
#map_area_right_bottom{
  cursor: nw-resize;
}
.title_type{
    font-weight: bold;
 }
.az_info , .search_country ,.search_count a{
   font-weight: bold;
   color: #9bb800;
   background-color: inherit;
}
.search_count {
	margin: 4px 0px;
}
.search_count a , .search_count {
	font-size: 11px;
	text-decoration: none;
	font-family: georgia, verdana, sans-serif;
}
.search_list{
    padding-left: 16px;
	margin-bottom: 4px;
}
.search_list li{
	font-weight: bold;
}
.search_list .sub{
	margin-left: 20px;
	font-weight: normal;
}
.date_info{
    font-weight: bold;
    text-align: right;
    color: #8ea604;
    background-color: inherit; 
}
.comment_info{
    font-weight: bold;
    text-align: right;
    color: #8ea604;
    background-color: inherit; 
}
.comment_info a {
	margin-right: 10px;
}
.ecases_list{
  padding-left: 14px;
	margin-bottom: 10px;
}
ul#sort_types_list{
  padding: 8px 0px 2px 0px;
}
ul#sort_types_list li{
  font-family: verdana, sans-serif;
  padding: 0px 2px;
  display: inline;
}
.sup_title{
  color: #868068;
  background-color: inherit; 
  font-weight: bold;
	padding-bottom: 12px;
}
.slideshow {
	margin: 10px 0px;
}
#slideshow_admin_content {
	background-color: #e4e2d4;
	color: inherit;
	padding: 10px 6px;
}
#slideshow_admin_content form {
	margin: 10px 0px;
}
#video_admin_content{
  padding: 10px 14px;
	margin: 4px 0px;
	background-color: #e4e2d4;
	color: inherit;
}
#sv_admin {
	margin: 4px 0px 6px 0px;
}
div#watch_video {
	width: 390px;
}
#preferences_menu p {
	padding-bottom: 6px;
}
#change_password_form {
	width: 300px;
	text-align: right;
}
#change_password_form p {
	padding: 2px 0px; 
}
ul#admin_menu {
  padding: 10px 0px 20px 0px;
}
ul#admin_menu li {
  display: inline;
  padding-right: 10px;
}
#users_form p {
	padding-bottom: 4px; 
}
.profile {
	background-color: #e4e2d4;
	color:inherit;
	width: 600px;
	padding: 10px;
	margin: 10px 0px;
	border: 1px solid #9AB800;
}
.request_info_btn {
	font-weight: bold;
	float: right;
}
table.profile_data {
    width: 100%;
}
table.profile_data th {
	text-align: right;
	vertical-align: top;
	width: 130px;
}
table.profile_data td {
	text-align: left;
	vertical-align: top;
}
table.profile_data td.user_photo{
    text-align: right;
}
table.profile_data .request_user_types {
	font-weight: bold;
}
table.user_photo_container {
	border-collapse: collapse;
  	border-spacing: 0px;
}
table.user_photo_container tr td{
	padding: 0px;
	vertical-align: top;
}
#submit_profile {
	padding: 10px;
}
ul.slide_list {
	list-style: none;
	padding:2px;
}
li.slide {
	display:inline;
	position: relative;
}
table.box_container {
	display:inline;
	border: 0px none;
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
  	border-spacing: 0px;
}
td.white_box {
	width: 50px;
	height: 30px;
	background-color: #FFF;
	color: inherit;
	border: solid 1px;
	border-color: gray;
	text-align: center;
	vertical-align: middle;
	margin: 0px 0px 5px 0px;
}
td.white_box table {
	display:inline;
	border: 0px none;
	text-align: center;
	border-collapse: collapse;
  	border-spacing: 0px;
}
td.white_box table tr td{
	vertical-align: middle;
}
td.white_box table tr td.box_text{
	line-height: 10px;
	padding: 0px;
    vertical-align: middle;
}
td.white_box table tr td.box_text form {  
}
td.white_box table tr td.box_text form input {
    width: 45px;
}
td.delete_box {
	width: 17px;
	padding: 0px;
	margin: 5px 0px;
	display:inline;
	position: relative;
	line-height: 22px;
	vertical-align: top;
}
td.delete_box img {
	border: 0px none;
	visibility: hidden;
}
td.delete_box a:hover {
	color: inherit;
	background-color: #fff;
}
p.reorder_link {
	text-align: right;
}
img.slide_image {
	margin:2px;
}
img.sortable_slide_image {
	margin: 8px;
	position: relative;
}
a.audio_image:hover {
	background-color:  #fff;
	color:inherit;
}
a.audio_image img {
	border: 0px none;
	width: 44px;
	height: 44px;
	text-align: center;
}
img.no_flash{
    width:200px; 
    height:100px;
}
.comment_form p{
	margin: 0px;
	padding: 0px;
}
.comment_footer , .comment_footer a.profile_link {
	color: #8AA307;
    background-color: inherit; 
}
.comment_user , .comment_teacher {
	width: 390px;
	overflow: hidden;
}
.comment_teacher {
	color: #0086C6;
	background-color: inherit; 
}
.comment_single {
	margin: 6px 2px;
}
.comment_single p div {
	font-family: georgia, verdana, sans-serif;
}
#comment_menu {
  margin: 6px 2px;
}	
div#description {
  color: #8A7F69;
  background-color: inherit; 
  font-family: georgia, verdana, sans-serif;
  margin-bottom: 6px;
}
table.for_rbtn {
	border-collapse: collapse;
  	border-spacing: 0px;
}
table.for_rbtn td {
	vertical-align: top;
}
td.for_rbtn {
	width: 24px;
	padding: 0px;
}
td.for_rbtn p {
	text-align: left;
	visibility: hidden;
} 
td.for_rbtn a {
	background-color: #fff;
	color: inherit;
}
td.for_rbtn a:hover {
	background-color: #fff;
	color: inherit;
}
td.for_rbtn a  img {
	border: 0px none;
}
form .video_link {
	width: 354px;
	height: 80px;
}
table.users_data tr.table_menu {
}
table.users_data tr th {
	width:140px;
	text-align: left;
}
div#date_parse_validation p{
  width: 254px;
  border: 2px solid red;
  padding: 7px 7px 12px 7px;
  margin: 2px 0px;
  background-color: #f0f0f0;
  color: red;
}
.teaching_info {
  font-size: 14px;
  font-weight: bold;
  color: #f00;
  background-color: inherit;
}
div.help h1, div#help_content {
  margin: 6px 0px;
}
div.resources {
  font-family: georgia, verdana, sans-serif;
}
div.resources p.sup_title {
  font-family: verdana, georgia, sans-serif;
}
div.resources div.menu {
  font-weight: bold;
  margin-top: 10px;
  padding: 9px 0px 5px 20px;
  border-top: solid #9ab800 1px;
}
div.resources div.menu div.left {
  font-size: 11px;
  color: #3f3a27;
  background-color: inherit;
}
div.resources div.menu div.right {
  font-size: 10px;
  font-family: verdana, georgia, sans-serif;
  float: right;
}
div.resources div#flash_info p.flash_info_notice, p.flash_info_error {
  padding: 10px 0px 10px 20px;
}
div.resources table.resources {
  width: 100%;
  border-top: dotted #9ab800 1px;
  padding-bottom: 4px;
}
div.resources table.resources tr.header td {
  font-size: 20px;
  color: #9ab800;
  background-color: inherit;
  padding: 7px 0px 11px 0px;
}
div.resources table.resources tr.resource_cell {
  font-size: 11px;
  line-height: 16px;
}
div.resources table.resources tr.resource_cell td p.link a {
  font-weight: bold;
  color: #3f3a27;
  background-color: inherit;
}
div.resources table.resources tr.resource_cell td p.link a:hover {
  background-color: #3f3a27;
  color: #fff;
}
div.resources table.resources tr.resource_cell td p.info {
  color: #868068;
    background-color: inherit;
}
div.resources table.resources tr.resource_cell td p.info a {
 	background-color: #fff;
	color: inherit;
}
div.resources table.resources tr.resource_cell td p.info img {
  border: 0px none;
}
div.edit_file {
  width: 400px;
  background-color: #e4e2d4;
  border-color: #b8bf7e;
  padding: 10px 20px;
  color: #868068;
}
div.edit_link, div.edit_file {
  width: 480px;
  background-color: #e4e2d4;
  border: solid #b8bf7e 1px;
  padding: 10px 30px 10px 20px;
  color: #868068;
  font-family: verdana, sans-serif;
  font-weight: bold;
  font-size: 11px;
  line-height: 24px;
}
div.edit_link div.link, div.edit_file div.file {
  padding-bottom: 6px;
}
div.edit_link div.link p input, div.edit_file div.file p input {
  font-weight: normal;
}
div.edit_link div.description p input, div.edit_file div.description p input {
  font-weight: normal;
}
div.edit_link div.submit p, div.edit_file div.submit p {
  font-weight: normal;
}
div.edit_link div.description {
  padding-bottom: 10px;
}
div.edit_file div.description {
  padding-bottom: 10px;
  float: right;
}
div.edit_file div.submit {
  clear: right;
}
div.edit_link div.submit p a.red, div.edit_file div.submit p a.red {
  font-size: 10px;
  margin-left: 10px;
}
div.supfooter div.menu {
	font-weight: bold;
	color: #868068;
	background-color: inherit;
}
div.supfooter div.menu ul {
	text-align: center;
}
div.supfooter div.menu ul li {
    display: inline;
    padding: 0px 2px;
}
div.supfooter div.menu ul li a {
	text-decoration: none;
}
div.supfooter p{ 
	text-align: center;
}
div.countries p.flash_info_notice, div.country_items p.flash_info_error {
  padding-bottom: 10px;
}

div.countries {
}
div.countries div.country_item {
  padding: 0px 0px 5px 0px;
}
div.countries div.country_item div.flag {
  float: left;
  padding-right: 4px;
}
div.countries div.country_item div.remove_flag {
  margin-top: 66px;
}
div.countries div.country_item div.remove_flag a img {
  border: none;
}
div.countries div.country_item div.remove_flag a:hover {
  background-color: inherit;
  color:inherit;
}
/**
*	Rails internal styles
*/
#errorExplanation {
  width: 388px;
  border: 2px solid red;
  padding: 7px 7px 12px 7px;
  margin: 8px 0px;
  background-color: #f0f0f0;
  color: inherit;
}
#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}
#errorExplanation p {
  color: #333;
  background-color: inherit;
  padding: 5px;
  margin: 8px 0px;
}
#errorExplanation ul {
}
#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
  margin: 0px 15px;
}
div.uploadStatus {
  margin: 5px;
}
div.progressBar {
  margin: 5px;
}
div.progressBar div.border {
  background-color: #fff;
  color: inherit;
  position: relative;
  border: 1px solid #aaa;
  width: 100%;
}
div.progressBar div.background {
  background-color: #333;
  color: inherit;
  height: 18px;
  width: 0%;
}